<script setup>

</script>

<template>

  <div class="nav">
    <div class="one">12</div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
  </div>
</template>



<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 250px auto;
  // border: 1px solid rgb(44, 40, 40);
  position: relative;
  transform-style: preserve-3d;

  transform: rotateX(20deg) rotateY(20deg);
  animation: xuanzhuan 6s 0s linear infinite;
}

.nav div {
  width: 200px;
  height: 200px;
  border: 1px solid rgb(44, 40, 40);
  position: absolute;
  opacity: 0.5;

}

.one {
  transform: translateX(-100px) rotateY(90deg);
  // background-color: rgb(188, 83, 83);
  background-color: rgb(56, 107, 63);
  animation: yidong1 3s 0s linear infinite;
}

.two {
  transform: translateX(100px) rotateY(90deg);
  // background-color: rgb(83, 188, 163);
  background-color: rgb(56, 107, 63);
  animation: yidong2 3s 0s linear infinite;

}

.three {
  transform: translateY(-100px) rotateX(90deg);
  background-color: rgb(56, 107, 63);
  animation: yidong3 3s 0s linear infinite;

}

.four {
  transform: translateY(100px) rotateX(90deg);
  // background-color: rgb(56, 72, 107);
  background-color: rgb(56, 107, 63);
  animation: yidong4 3s 0s linear infinite;

}

.five {
  transform: translateZ(-100px);
  background-color: rgb(56, 107, 63);
  animation: yidong5 3s 0s linear infinite;
}

.six {
  transform: translateZ(100px);
  background-color: rgb(56, 107, 63);
  animation: yidong6 3s 0s linear infinite;

}

@keyframes xuanzhuan {
  0% {
    transform: rotateX(0deg) rotateY(0deg);

  }


  100% {
    transform: rotateX(360deg) rotateY(360deg);

  }
}

@keyframes yidong1 {
  0% {
    transform: translateX(-100px) rotateY(90deg);
  }

  50% {
    transform: translateX(-150px) rotateY(90deg);
  }

  100% {
    transform: translateX(-100px) rotateY(90deg);
  }
}

@keyframes yidong2 {
  0% {
    transform: translateX(100px) rotateY(90deg);
  }

  50% {
    transform: translateX(150px) rotateY(90deg);
  }

  100% {
    transform: translateX(100px) rotateY(90deg);
  }
}

@keyframes yidong3 {
  0% {
    transform: translateY(-100px) rotateX(90deg);
  }

  50% {
    transform: translateY(-150px) rotateX(90deg);
  }

  100% {
    transform: translateY(-100px) rotateX(90deg);
  }
}

@keyframes yidong4 {
  0% {
    transform: translateY(100px) rotateX(90deg);
  }

  50% {
    transform: translateY(150px) rotateX(90deg);
  }

  100% {
    transform: translateY(100px) rotateX(90deg);
  }
}

@keyframes yidong5 {
  0% {
    transform: translateZ(-100px);
  }

  50% {
    transform: translateZ(-150px);
  }

  100% {
    transform: translateZ(-100px);
  }
}

@keyframes yidong6 {
  0% {
    transform: translateZ(100px);
  }

  50% {
    transform: translateZ(150px);
  }

  100% {
    transform: translateZ(100px);
  }
}
</style>